<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>
    <div @click="changeUsername">userinfo.username: {{ userinfo.username }}</div>
    <div>userinfo.age: {{ userinfo.age }}</div>
    <div>userinfo.intro: {{ userinfo.intro }}</div>


    <hr>
    <div>username: {{ username }}</div>
    <div>age: {{ age }}</div>
    <div>intro: {{ intro }}</div>
    
    


  </div>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {

    const userinfo = reactive({
      username: '贾玲',
      age:23,
      intro: '喜剧演员'
    })
    
    console.log(userinfo);
    console.log(userinfo.username);
    console.log(userinfo.age);
    console.log(userinfo.intro);


    const changeUsername = () => {
      userinfo.username = '沈腾'
    }


    const userinfo2 = toRefs(userinfo) 
    console.log(userinfo2);
    console.log(userinfo2.username);
    console.log(userinfo2.age);
    console.log(userinfo2.intro);


    return {
      changeUsername,
      userinfo,

      // ...userinfo,
      // 等价于
      // username: userinfo.username,
      // age:userinfo.age,
      // intro: userinfo.intro

      ...userinfo2

    }
    }

   
  
}
</script>

<style scoped >

</style>